import React from 'react'
import {getBasketballStatReq} from "../../apis/goApis";
import {withRouter} from 'react-router-dom'
import {log} from "../../utils/commonfunc";
import './basketball-stat.css'

class BasketballStat extends React.Component {
    constructor(props) {
        super(props)
        this.matchId = parseInt(this.props.match.params.gameId)
        this.state = {
            home: {},
            away: {},
            curIndex: 0,
        }
    }

    componentDidMount() {
        this.getDetail()
    }

    getDetail() {
        getBasketballStatReq({id: this.matchId})
            .then(resp => this.setState({home: resp.data.ok?.Team1, away: resp.data.ok?.Team2,}))
    }

    renderTeamButton(team, index) {
        const cur = this.state.curIndex === index
        const isHome = index === 0
        return <div
            className={cur ? `b-ball-team-button b-ball-team-button-active-${isHome ? 'home' : 'away'}` : 'b-ball-team-button'}
            onClick={() => this.setState({curIndex: index,})}
        >
            <span>{team.Name}</span>
        </div>
    }

    renderTeamStat = (home, away) => {
        const homeTeamStat = home.Count || []
        const awayTeamStat = away.Count || []
        const texts = [
            '得分',
            '助攻',
            '篮板',
            '前-后篮板',
            '抢断',
            '盖帽',
            '投篮(中-投)',
            '三分',
            '罚球(中-投)',
            '失误',
            '犯规',
        ]

        const logoStyle = {
            width: '32px',
            height: '32px',
            borderRadius: '50%',
        }
        const title = (
            <div className='flex-space-between-align-center pd-8px-12px'>
                <div className='flex-align-center flex-1'>
                    <div
                        style={{
                            ...logoStyle,
                            background: `no-repeat url(${home.Logo}) 50% 50%/25px,#fff`,
                            marginRight: '8px',
                        }}
                    />
                    <span>{home.Name}</span>
                </div>
                <span>VS</span>
                <div className='flex-align-center flex-1' style={{justifyContent: 'flex-end'}}>
                    <span>{away.Name}</span>
                    <div
                        style={{
                            ...logoStyle,
                            background: `no-repeat url(${away.Logo}) 50% 50%/25px,#fff`,
                            marginLeft: '8px',
                        }}
                    />
                </div>
            </div>
        )
        const stats = (
            <div>
                {texts.map((t, i) => {
                    return <div key={i} className='flex-space-between-align-center bg-white pd-t-b-12px pd-l-r-20px mg-b-1px'>
                        <span>{homeTeamStat[i]}</span>
                        <span className='gray-text'>{t}</span>
                        <span>{awayTeamStat[i]}</span>
                    </div>
                })}
            </div>
        )
        return (
            <div>
                {title}
                {stats}
            </div>
        )
    }

    renderPlayerStat = (playerStat) => {



        const texts = [
            // '背号',
            '姓名',
            '首发',
            '出场时间',
            '投篮',
            '三分',
            '罚球',
            '前篮板',
            '后篮板',
            '总篮板',
            '助攻',
            '抢断',
            "盖帽",
            "失误",
            "犯规",
            "得分",
        ]

        // const header = <div>
        //     {texts.map((t, i) => <span key={i}>{t}</span>)}
        // </div>

        const header = <thead>
            <tr>
                {texts.map((t, i) => <th
                    nowrap="nowrap"
                    scope='col'
                    key={i}
                    style={{
                        fontSize: '12px',
                        padding: '8px 12px',
                        color: i === texts.length - 1 ? '#333' : 'rgba(51, 51, 51, 0.4)',
                        position: i === 0 ? 'sticky' : 'static',
                        zIndex: i === 0 ? '2' : '1',
                        marginRight: i === 0 ? '1px' : '',
                        top: 0,
                        left: 0,
                        background: '#F8F8F8',
                    }}
                >
                    {t}
                </th>)}
            </tr>
        </thead>

        const body = <tbody>
            {playerStat.map((player, index) => {

                return <tr key={index}>
                    {player.map((stat, index) => {
                        if (index === 2 || index === 0) {
                            return null
                        }
                        return <td
                            key={index}
                            nowrap="nowrap"
                            style={{
                                textAlign: 'center',
                                padding: '16px 12px',
                                position: index === 1 ? 'sticky' : 'static',
                                marginRight: '1px',
                                top: 0,
                                left: 0,
                                background: index === player.length - 1 ? '#F1F1F1' : '#fff',
                            }}
                        >{stat}</td>
                    })}
                </tr>
            })}
        </tbody>

        return <div style={{
            overflowX: 'scroll',
            width: '100%',
        }}>
            <table
                style={{
                    borderCollapse: 'separate',
                    borderSpacing: '0 1px',
                }}
            >
                {header}
                {body}
            </table>
        </div>
    }

    render() {
        const home = this.state.home
        const away = this.state.away
        const cur = this.state.curIndex
        const curTeam = cur === 0 ? home : away

        const playerStat = curTeam?.Player || []
        const teamButtons = <div className='flex-space-between-align-center pd-12px-16px'>
            {home && this.renderTeamButton(home, 0)}
            {away && this.renderTeamButton(away, 1)}
        </div>
        return <div>
            {teamButtons}
            {playerStat.length > 0 && this.renderPlayerStat(playerStat)}
            {home && away && this.renderTeamStat(home, away)}
        </div>
    }
}

export default withRouter(BasketballStat)